<template>
	<view class="message-orderInfo" :style="{ 'background-color': isFlow === 'out' ? '#FFF' : '#F2F2F2' }">
		<view class="status">
			<view class="label">案件状态：</view>
			<view class="value">
				<text>{{ orderInfo.status_title }}</text>
			</view>
		</view>
		<view class="status" v-if="isWeiKuan">
			<view class="label">尾款状态：</view>
			<view class="value">
				<text>{{ orderInfo.weikuan_is_pay == 0 ? '未支付' : '已支付' }}</text>
			</view>
		</view>
		<view class="type" v-if="isWeiKuan">
			<view class="label">案件名称：</view>
			<view class="value">{{ orderInfo.anjian_name }}</view>
		</view>
		<view class="type">
			<view class="label">案件类型：</view>
			<view class="value">{{ orderInfo.category_title }}</view>
		</view>
		<view class="remark" v-if="isWeiKuan">
			<view class="label">尾款备注：</view>
			<view class="value">{{ orderInfo.remark }}</view>
		</view>
		<view class="remark" v-else>
			<view class="label">案件备注：</view>
			<view class="value">{{ orderInfo.f_desc }}</view>
		</view>
		<view class="price" v-if="isWeiKuan">
			<view class="label">尾款金额：</view>
			<view class="value">{{ orderInfo.price }}</view>
		</view>
		<view class="price" v-else>
			<view class="label">案件金额：</view>
			<view class="value">
				<text>￥{{ orderInfo.price }}</text>
			</view>
		</view>
		<view class="btn" v-if="isFlow !== 'out' && orderInfo.status_title === '待付款'">
			<wd-button type="success" @click="toPay"
				custom-class="wd-button-custom-class-my-success wd-button-custom-class-w50 ">同意委托</wd-button>
		</view>
		<view class="btn" v-if="isFlow !== 'out' && orderInfo.weikuan_is_pay === 0">
			<wd-button type="success" @click="toWkPay"
				custom-class="wd-button-custom-class-my-success wd-button-custom-class-w50 ">支付尾款</wd-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { watch, ref, onMounted } from 'vue';
	import { queryCaseOrderInfo, queryWeikuanPayStatus } from '@/api/index';
	import useRouter from '@/hooks/useRouter';
	import api from '@/api/index';
	import WxPay from "@/libs/WxPay"
	interface IProps {
		content : Record<string, any>;
		flow : Record<string, any>;
	}
	const router = useRouter();
	const props = withDefaults(defineProps<IProps>(), {
		content: () => ({}),
		flow: () => ({})
	});
	const data = ref();
	const orderInfo = ref({
		status_title: '',
		category_title: '',
		f_desc: '',
		price: ''
	});
	const isFlow = ref();
	const isWeiKuan = ref(false);
	const toPay = () => {
		router.push({
			url: '/commonPage/imCasePerfect/imCasePerfect',
			params: { orderId: orderInfo.value.id, categoryId: orderInfo.value.category_id }
		});
	};
	const toWkPay = () => {
		if (uni.$appConfig.platform === 'user') {
			uni.$wdToast.confirm('确定支付当前尾款吗？', '提示').then((res : any) => {
				let wxPay = new WxPay();
				wxPay.pay({
					orderId: orderInfo.value.weikuan_order_id,
					type: '3'
				}, {
					fail: () => {
						uni.$wdToast.show("取消支付")
					},
					getOrderCb: () => {
						getOrder(orderInfo.value, orderInfo.value.id);
					}
				})
				// api.paymentWeikuan({
				// 	weikuan_order_id: orderInfo.value.weikuan_order_id
				// }).then((res) => {
				// 	getOrder(orderInfo.value, orderInfo.value.id);
				// });
			});
		}
	};
	const getOrder = (temp, orderId) => {
		queryCaseOrderInfo({
			anjian_order_id: orderId
		}).then((res) => {
			orderInfo.value = {
				...res,
				...temp
			};
			if (isWeiKuan.value && orderInfo.value.weikuan_order_id) {
				queryWeikuanPayStatus({
					weikuan_order_id: orderInfo.value.weikuan_order_id
				}).then((res) => {
					orderInfo.value['weikuan_is_pay'] = res.is_pay;
				});
			}
			setTimeout(() => {
				getOrder(temp, orderId);
				// 模拟异步操作，确保数据更新后再更新视图。
				// 这里使用setTimeout，实际应用中可以使用Vue的nextTick方法。
			}, 10000);
		});
	};
	onMounted(() => {
		isFlow.value = props.flow;

		let temp = JSON.parse(props.content.custom);
		if (!temp.orderId) {
			return false;
		}
		if (orderInfo.value && temp.orderId === orderInfo.value.id) {
			return false;
		}
		data.value = props.content;
		if (temp.type === '尾款') {
			isWeiKuan.value = true;
		}
		if (temp.orderId) {
			getOrder(temp, temp.orderId);
		}
	});
</script>
<style lang="scss" scoped>
	.message-orderInfo {
		background-color: #fff;
		border-radius: 15rpx;
		padding: 24rpx;
		font-family: PingFang;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		width: calc(100% - 24rpx - 24rpx);
		min-width: 340rpx;

		.status,
		.type,
		.remark,
		.price {
			display: flex;
			margin-bottom: 15rpx;
			justify-content: space-between;

			.label {
				width: 140rpx;
			}

			.value {
				flex: 1;
				text-align: right;
				color: #000000;

				text {
					color: rgba(201, 28, 31, 1);
				}
			}
		}

		.btn {
			text-align: center;
			margin-top: 24rpx;

			.wd-button-custom-class-w50 {
				width: 50%;
				height: 60rpx !important;
				line-height: 60rpx !important;
				margin-top: 24rpx;
			}
		}
	}
</style>